<template>
  <view class="">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">体态对比报告</block>
    </cu-custom>
    <view class="quan">
      <view class="yuan">
        <view class="haod">
          好的
        </view>
        <view class="hde">
          好的
        </view>
      </view>
      <view class="hais">
        {{datas.name}}
      </view>
      <view class="erl">
        <view class="xiaoq"></view>
        <view class="nianr">
          {{datas.createTime}}
        </view>
      </view>
      <view v-for="(item, index) in datas.picArray" :key="index">
        <view class="xians u-f-ajc">
          <view class="xshi u-f-ajc">
            <view style="width: 50%;height: 100%;color: #FFFFFF;" class="relative">
              <image :src="'https://jxjsservice.jxfit.cn/file' + item.picBefore" />
              <view class="names">Before</view>
              <view class="createTime">{{item.picBeforeTime}}</view>
            </view>
            <view style="width: 50%;height: 100%;color: #FFFFFF;" class="relative">
              <image :src="'https://jxjsservice.jxfit.cn/file' + item.picAfter" />
              <view class="names">After</view>
              <view class="createTime">{{item.picBeforeTime}}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="dibu u-f">
        <view class="zuo">
          <image src="../../static/logo.png" mode=""></image>
        </view>
        <view class="you">
          <view class="jjie" style="color: #ffffff;">
            {{datas.userName}}
          </view>
          <view class="jjie" style="color: #b6b6e1;">
            教练名称
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        datas: {},
      }
    },
    onLoad(e) {
      if (e.id) this.getData(e.id);
      else this.getData2(uni.getStorageSync("phyUser").userId);
    },
    methods: {
      async getData2(memberId) {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/body/getContrastBodyStateList",
          data: {
            memberId,
          }
        })
        this.getData(datas[datas.length-1].id);
      },
      async getData(bodyStateId) {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/body/getContrastBodyStateById",
          data: {
            bodyStateId,
          }
        })
        this.datas = datas;
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #4B505F !important;
  }

  .yuan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .haod {
    width: 140upx;
    height: 140upx;
    background: #39bb9d;
    color: #ffffff;
    border-radius: 70upx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40upx;
  }

  .hde {
    color: #ffffff;
    margin: 20upx;
  }

  .hais {
    font-size: 30upx;
    font-weight: 555;
    margin-left: 20upx;
    color: #ffffff;
  }

  .erl {
    display: flex;
    align-items: center;
    padding: 20upx;
  }

  .xiaoq {
    width: 20upx;
    height: 20upx;
    border: #39bb9d 6upx solid;
    border-radius: 10upx;
  }

  .nianr {
    font-size: 24upx;
    color: #ffffff;
  }

  .xians {
    width: 90%;
    height: 600rpx;
    margin: 0 auto;
    padding-bottom: 40rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #454A59;
  }

  .xshi {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 16rpx;
  }

  .names {
    position: absolute;
    left: 20rpx;
    bottom: 60rpx;
    font-size: 30rpx;
  }

  .createTime {
    position: absolute;
    left: 20rpx;
    bottom: 20rpx;
    font-size: 24rpx;
  }

  .xshi image {
    width: 100%;
    height: 100%;
  }

  .dibu {
    padding: 15rpx 30rpx;
  }

  .zuo {
    width: 100upx;
    height: 100upx;
    border-radius: 50upx;
  }

  .zuo image {
    width: 100%;
    height: 100%;
  }

  .you {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .jjie {
    font-size: 28upx;
  }
</style>
